<template>
    <el-card shadow="never" class="statement_quantity_box">
        <div class="num_box">
            <div class="help_box">
                <p>进群人次</p>
                <el-popover
                    placement="top-start"
                    effect="dark"
                    trigger="hover"
                    content="通过本次活动进群的人次（包含退群人次）">
                    <template #reference>
                        <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(props.basic.total_join) }}</div>
        </div>
        <div class="num_box">
            <div class="help_box">
                <p>退群人次</p>
                <el-popover placement="top-start" effect="dark" trigger="hover" content="通过本次活动进群后退群的人次">
                    <template #reference>
                        <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(props.basic.total_retreat) }}</div>
        </div>
        <div class="num_box">
            <div class="help_box">
                <p>净增人数</p>
                <el-popover
                    placement="top-start"
                    effect="dark"
                    trigger="hover"
                    content="通过本次活动进群且没有退群的客户">
                    <template #reference>
                        <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(props.basic.total_add) }}</div>
        </div>
        <div class="num_box">
            <div class="help_box">
                <p>可触达好友数</p>
                <el-popover
                    placement="top-start"
                    effect="dark"
                    trigger="hover"
                    content="通过本次活动进群的添加过企微好友的客户数（包含退群的人）">
                    <template #reference>
                        <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(props.basic.total_touch) }}</div>
        </div>
        <div class="num_box">
            <div class="help_box">
                <p>不可触达好友数</p>
                <el-popover
                    placement="top-start"
                    effect="dark"
                    trigger="hover"
                    content="通过本次活动进群的从未添加过企微好友的客户数（包含退群的人）">
                    <template #reference>
                        <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(props.basic.total_not_touch) }}</div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { numFormat } from '@/utils/utils';
import { withDefaults, defineProps } from 'vue';
interface Props {
    basic: any;
}
const props = defineProps(['basic']);
</script>

<style lang="scss" scoped>
.statement_quantity_box {
    margin-bottom: 16px;

    :deep(.el-card__body) {
        display: grid;
        grid-template-columns: repeat(5, 1fr);

        .num_box {
            text-align: left;

            .help_box {
                display: flex;
                align-items: center;
            }

            .title {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #666;
                line-height: 20px;
            }

            .help_icon {
                margin-left: 8px;
                width: 16px;
            }

            .num {
                padding-top: 8px;
                font-size: 30px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                color: #33302d;
                line-height: 36px;
            }
        }
    }
}
</style>
